<template>
  <div class="zhaohu-main">
    <div class="zhaohu-left">
      <EchartPie :pieData="zhaohuDatas.fenleiPieData" :pieColor="pieColors" :lengedShow="false" :labelPosition="labelPosition" :labelColor="labelColor" :pieFormatter="labelFormatter" :pieRadius="pieRadius" :pieCenter="pieCenter" :labelFontsize="labelFontsize" :legendFontsize="legendFontsize" :legendItemsize="legendItemsize" :tooltipTrigger="tooltipTrigger" :seriesName="zhaohuDatas.name" :labelLineLength="labelLineLength" :labelLineLength2="labelLineLength2" :labelLineWidth="labelLineWidth"></EchartPie>
    </div>
    <div class="zhaohu-right">
      <ElTable :tableConfig="zhaohuDatas.config" :tableData="zhaohuDatas.tableData" :headerShow="true" :tableInterval="tableInterval"></ElTable>
    </div>
  </div>
</template>

<script>
import EchartPie from "@/components/EchartPie.vue";
import ElTable from "@/components/ElTable.vue";
import { request } from '@/api/request.js'
export default {
  name: 'ViewZhaohu',
  data () {
    return {
      tableInterval:1500,
      zhaohuDatas: [],
      pieRadius:['45%', '60%'],
      pieColors:["#3a8ee6","#5faabf","#17dddb","#3dc4dd","#a8dfe9","#28517b"],
      pieCenter:['50%', '40%'],
      labelColor:"#c5e1f0",
      baseLabelFontsize: 11,
      labelFontsize: 11,
      labelPosition: 'outside',
      baseLegendFontsize: 12,
      legendFontsize: 12,
      legendItemsize: [10,8],
      tooltipTrigger:'item',
      labelFormatter: '{b}',
      baseLabelLineLength: 10,
      labelLineLength: 10,
      baseLabelLineLength2: 8,
      labelLineLength2: 8,
      baseLabelLineWidth: 1,
      labelLineWidth: 1,
    }
  },
  mounted() {
    this.getzhaohu();
    // this.labelColor = this.$store.state.colors.pieLabelZiColor
  },
  methods: {
    getzhaohu(){
      request({
        url: '/zhuanyezhaohu',
        method: 'get'
      }).then(res=>{
        this.zhaohuDatas = res.data;
      })
    }
  },
  components: {
    EchartPie,
    ElTable
  },
  watch: {
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          this.labelColor = this.$store.state.colors.barLabelZiColor;
          this.labelFontsize = this.baseLabelFontsize * parseFloat(this.$store.state.htmlScale);
          this.legendFontsize = this.baseLegendFontsize * parseFloat(this.$store.state.htmlScale);
          this.labelLineLength = this.baseLabelLineLength * parseFloat(this.$store.state.htmlScale);
          this.labelLineLength2 = this.baseLabelLineLength2 * parseFloat(this.$store.state.htmlScale);
          this.labelLineWidth = this.baseLabelLineWidth * parseFloat(this.$store.state.htmlScale);
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.zhaohu-main{
  width: 100%;
  height: 85%;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border: 0px solid red;
  .zhaohu-left{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    margin: 1rem;
  }
  .zhaohu-right{
    width: 60%;
    height: 18.2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    margin: 1rem;
    border: 0px solid blue;
  }
}
</style>